<!--
	作者：956911785@qq.com
	时间：2019年8月1日17:44:32
	描述：书籍分类-添加
-->

<template>
	<Modal :title="title" v-model="modal0" width="800px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="120" label-position="left">
			<div style="width:100%;height:300px; overflow-y: hidden;">
		      	
				<div style="width:100%;height: 60px;line-height: 60px;float:left;text-align: left;">
			        <FormItem  prop="dhmc" label="诗词大会名称">
			        	<Input v-model="params.dhmc" placeholder="请输入诗词大会名称" clearable style="width: 70%"></Input>
	        		</FormItem>
		      	</div>
		      	
				<div style="width:100%;height: 60px;line-height: 60px;float:left;display:table;text-align: left;">
					<div style="width:50%;float:left;">
						<FormItem label="诗词大会开始时间" >
							<DatePicker v-model="ksTime" @on-change="kschange" transfer type="datetime" :options="ksTimeOption" format="yyyy-MM-dd HH:mm" placeholder="请选择诗词大会开始时间" style="width:150px"></DatePicker>
						</FormItem>
					</div>
					<div style="width:50%;float:left;">
						<FormItem label="诗词大会结束时间" >
							<DatePicker v-model="jsTime" @on-change="jschange" transfer type="datetime" :options="jsTimeOption" format="yyyy-MM-dd HH:mm" placeholder="请选择诗词大会结束时间" style="width:150px"></DatePicker>
						</FormItem>
					</div>
				</div>
					
		      	
				<div style="width:100%;height: 60px;line-height: 60px;float:left;display:table;text-align: left;">
					<div style="width:50%;float:left;">
						<FormItem  prop="totalscore" label="最高积分">
							<Input v-model="params.totalscore" placeholder="请输入最高积分" on-change="jsJf" clearable style="width:150px"></Input>
						</FormItem>
					</div>
					<div style="width:50%;float:left;">
						<FormItem prop="maxpm" label="前多少名可以获取积分" >
							<Input v-model="params.maxpm" placeholder="请输入前多少名可以获取积分" on-change="jsJf" clearable style="width:150px"></Input>
						</FormItem>
					</div>
				</div>
				
				
				<div style="width:100%;height: 60px;line-height: 60px;float:left;display:table;text-align: left;">
					<FormItem label="说明">
						<label>诗词大会结束后，第一名积分为{{params.totalscore}}，第二名积分为{{sec}}，第二名积分为{{third}}。以此类推，前{{params.maxpm}}名可获取积分</label>
					</FormItem>
				</div>

				<div style="width:100%;height: 60px;line-height: 60px;float:left;">
			        <FormItem label="是否开启">
			        	<i-switch v-model="psswitch" @on-change="pschange" />
	        		</FormItem>	
		      	</div>
				
		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
     </Modal>
</template>

<script>

	
	export default {
		name:"tconent",
		props: {
    		teas:{
    			type:Object,	
    			default: function() {
					return null
				}
    		},
    		title:{
    			type:String,	
    		},
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			//正整数控制
			const zzsPass1 = (rule, value, callback) => {
				let reg = /^\+?[1-9][0-9]*$/; 
				if(!reg.test(value)){
					callback(new Error('请输入正整数！'));
				}else{
					return callback();
				}
			};
			return {
				ruleValidate: {
		            dhmc: [
		                {required: true, message: '请输入诗词大会名称！', trigger: 'blur'},
		                {length:30,validator:lenPass,trigger:'blur'}
		            ],
					totalscore: [
					    {required: true, message: '请输入最高积分！', trigger: 'blur'},
					    {validator:zzsPass1,trigger:'blur'}
					],
					maxpm: [
					    {required: true, message: '请输入前多少名可以获取积分！', trigger: 'blur'},
					    {validator:zzsPass1,trigger:'blur'}
					],
		        },   
                modal0:false,
                params:{
                	pid:'', 
					dhmc:'',  
					kssj:'', 
					jssj:'', 
					pstate:'',
					totalscore:'',
					maxpm:'',
                },
                
                ksTime:null,
				jsTime:null,
				psswitch:true,
				
				ksTimeOption: {
					disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
				},
                jsTimeOption: {
                	disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
				sec:'',
				third:'',
			} 
		},
		methods: {
			addsave:function(){
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("addsave",params);
                    }
               })
	        }, 
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.params={
	        		pid:'', 
					dhmc:'',  
					kssj:'', 
					jssj:'', 
					pstate:'',
					totalscore:'',
					maxpm:'',
				};
				this.sec='';
				this.third='';
	        },
	      
	      
	        kschange(e){
				this.params.kssj=e;
				this.jsTimeOption = {
                 	disabledDate(jssj) {
                    	return jssj < new Date(e) 
                    }
             	}	
			},
			
			jschange(e){
				this.params.jssj=e;
				this.ksTimeOption = {
                    disabledDate(kssj) {
                        return kssj > new Date(e) || kssj < Date.now()
                    }
                }
			}, 
			
			pschange(){
				if(this.psswitch){
					this.params.pstate="0";
				}else{
					this.params.pstate="1";
				}
			},

			jsJf(){
				var totalscore=this.params.totalscore;
				var maxpm=this.params.maxpm;
				if(totalscore && maxpm){
					var dj=parseInt(totalscore)/parseInt(maxpm);
					var sec=parseInt(totalscore)-parseInt(dj);
					var third=parseInt(totalscore)-parseInt(dj)-parseInt(dj);
					this.sec=sec;
					this.third=third;
				}
			}

		},
		mounted() {
		},
		watch:{
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}else{
					this.params={...this.teas};
					if(this.params.pstate=="0"){
						this.psswitch=true;
					}else{
						this.psswitch=false;
					}
					if(this.params.kssj){
						this.ksTime=new Date(this.params.kssj);
						
					}
					if(this.params.jssj){
						this.jsTime=new Date(this.params.jssj);
					}
					this.jsJf();
				}
			}
		},
		computed: {
		
		}
		
	}
</script>

<style scoped="scoped">
	
</style>



